<template>
  <div>
    <el-row>
      <el-col :span="24" style="text-align: center"><div>

        <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
<!--          <el-table-column-->
<!--              label="#"-->
<!--              width="50"-->
<!--          >-->
<!--            <template v-slot="scope">-->
<!--              {{ (page - 1) * limit + scope.$index + 1 }}-->
<!--            </template>-->
<!--          </el-table-column>-->

          <el-table-column
              prop="taskNo"
              label="任务号"
              min-width="140">
          </el-table-column>
          <el-table-column
              prop="taskDoc"
              label="任务文档"
              min-width="120">
            <template slot-scope="scope">
              <el-button icon="el-icon-download"
                         @click="download(scope.row.taskDoc)"
                         type="text"
              >下载</el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="taskTerminal"
              label="任务终端"
              min-width="100">
          </el-table-column>
          <el-table-column
              prop="createUsername"
              label="发布人"
              min-width="100">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="发布时间"
              min-width="150">
          </el-table-column>
          <el-table-column
              prop="deadline"
              label="截止时间"
              min-width="150">
          </el-table-column>
          <el-table-column
              prop="state"
              label="状态"
              min-width="140">
            <template slot-scope="scope">
              <div style="font-size: 15px">
                <el-tag :type="scope.row.state2" style="width: auto">
                  <i :class="scope.row.state"></i>
                  {{scope.row.stateText}}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="submitFile"
              label="下载答案"
              min-width="120">
            <template slot-scope="scope">
              <el-link icon="el-icon-download"
                       :href="scope.row.submitFile"
                       :underline="false"
                       target="_blank"
                       :disabled="scope.row.disabled"
                       download>下载</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
import {resultQuery} from "@/api/mytask";
export default {
  name: "MyTask",
  data(){
    return{
      tableData: [],
      dialogTableVisible: false
    }
  },
  mounted() {
    this.resultQuery()
  },
  methods:{
    download(url){
      const link = document.createElement('a')
      fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
        link.href = URL.createObjectURL(blob)
        // console.log(link.href)
        link.download = '1.md'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    resultQuery(){
      resultQuery().then(response=>{
        response.data.forEach(data=>{
          if (data.state===0){
            data.state='el-icon-circle-close'
            data.state2='danger'
            data.stateText='未提交'
            data["disabled"]=true
          }else if (data.state===1){
            data.state='el-icon-close'
            data.state2='warning'
            data.stateText='未批阅'
            data["disabled"]=true
          }else if (data.state===2){
            data.state='el-icon-circle-check'
            data.stateText='已完成'
            data.state2='success'
            data["disabled"]=false
          }
          else {
            data.state='el-icon-error'
            data.stateText='异常'
            data.state2='info'
            data["disabled"]=true
          }
          this.tableData.push(data)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
